import { useEffect } from 'react';
import { useNavigate, useLocation } from '@remix-run/react';
import { usePermission } from '~/hooks/usePermission';

const routePermissions = {
  '/dashboard': ['dashboard:view'],
  '/categories': ['category:view'],
  '/knowledge': ['knowledge:view'],
  '/questions': ['question:view'],
};

export function RouteGuard({ children }: { children: React.ReactNode }) {
  const navigate = useNavigate();
  const location = useLocation();
  const { checkPermissions } = usePermission();

  useEffect(() => {
    const requiredPermissions = routePermissions[location.pathname as keyof typeof routePermissions];
    if (requiredPermissions && !checkPermissions(requiredPermissions)) {
      navigate('/403');
    }
  }, [location.pathname, checkPermissions, navigate]);

  return <>{children}</>;
}